/* 弹性布局

使用  @each $name, $attr, $v in $list  循环子级

.flex--#{子级}
.flex--#{子级}--#{子级}
.flex--#{子级}--#{子级}--#{子级}

.flex-col--#{子级}
.flex-col--#{子级}--#{子级}
.flex-col--#{子级}--#{子级}--#{子级}

例子
.flex--a-c--j-c,
.flex--j-c--a-c {
    display: flex;
    align-items: center;
    justify-content: center;
}

父级
.flex display:flex;
.flex-col display:flex;flex-direction:column;

子级
可选 0-3 个子级组合 顺序要求 align-items / justify-content / wrap
a-b   -> align-items: baseline
a-s   -> align-items: flex-start
a-c   -> align-items: center
a-e   -> align-items: flex-end
j-s   -> justify-content: flex-start
j-c   -> justify-content: center
j-e   -> justify-content: flex-end
j-sb  -> justify-content: space-between
j-sa  -> justify-content: space-around
wrap  -> flex-wrap: wrap
*/

/* 子级的列表 */
/* ("子级名称", "子级属性名", "子级属性值") */
$list: ("a-b", "align-items", "baseline"), ("a-s", "align-items", "flex-start"), ("a-c", "align-items", "center"), ("a-e", "align-items", "flex-end"), ("j-s", "justify-content", "flex-start"), ("j-c", "justify-content", "center"), ("j-e", "justify-content", "flex-end"), ("j-sb", "justify-content", "space-between"), ("j-sa", "justify-content", "space-around"), ("j-se", "justify-content", "space-evenly"), ("wrap", "flex-wrap", "wrap");

$length: 11;

@for $var from 0 through 10 {
  .shrink-#{$var} {
    flex-shrink: $var;
  }

  .grow-#{$var} {
    flex-grow: $var;
  }
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

@function v($listI, $itemI) {
  @return nth(nth($list, $listI), $itemI);
}

@for $i from 1 to $length {
  .flex--#{v($i, 1)} {
    display: flex;
    #{v($i, 2)}: #{v($i, 3)};
  }

  .flex-col--#{v($i, 1)} {
    display: flex;
    flex-direction: column;
    #{v($i, 2)}: #{v($i, 3)};
  }

  @for $i2 from $i + 1 to $length {
    @if v($i, 2) != v($i2, 2) {
      .flex--#{v($i, 1)}--#{v($i2, 1)} {
        display: flex;
        #{v($i, 2)}: #{v($i, 3)};
        #{v($i2, 2)}: #{v($i2, 3)};
      }

      .flex-col--#{v($i, 1)}--#{v($i2, 1)} {
        display: flex;
        flex-direction: column;
        #{v($i, 2)}: #{v($i, 3)};
        #{v($i2, 2)}: #{v($i2, 3)};
      }

      @for $i3 from $i2 + 1 to $length {
        @if v($i, 2) != v($i3, 2) {
          @if v($i2, 2) !=v($i3, 2) {
            .flex--#{v($i, 1)}--#{v($i2, 1)}--#{v($i3, 1)} {
              display: flex;
              #{v($i, 2)}: #{v($i, 3)};
              #{v($i2, 2)}: #{v($i2, 3)};
              #{v($i3, 2)}: #{v($i3, 3)};
            }

            .flex-col--#{v($i, 1)}--#{v($i2, 1)}--#{v($i3, 1)} {
              display: flex;
              flex-direction: column;
              #{v($i, 2)}: #{v($i, 3)};
              #{v($i2, 2)}: #{v($i2, 3)};
              #{v($i3, 2)}: #{v($i3, 3)};
            }
          }
        }
      }
    }
  }
}
